<template>
  <div class="box">
    <el-card>
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/welcome' }"
            >首页</el-breadcrumb-item
          >
          <!-- <el-breadcrumb-item>防汛仓库</el-breadcrumb-item> -->
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <!--主页视图区域-->
        <!--图片区域-->
        <div class="block">
          <div class="condition">
            <div class="text1">查询条件</div>
          </div>
          <div class="bg-card">
            <el-form :inline="true">
              <el-form-item label="用户身份：">
                <el-input
                  placeholder="输入关键字"
                  v-model="userRank1"
                  style="width:120px"
                  @keyup.enter.native="fetch"
                >
                  <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
                </el-input>
              </el-form-item>
              <el-form-item label="所在单位：">
                <el-input
                  placeholder="输入关键字"
                  v-model="query.userDept"
                  style="width:120px"
                  @keyup.enter.native="fetch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item :span="3" class="input2">
                <el-button
                  type="primary"
                  style="margin-top:27.994px"
                  @click="fetch"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <br />
        <el-table :data="newlist" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userCode"
            label="用户编号"
            width="340"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="用户姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userDept"
            label="用户单位"
            align="center"
          ></el-table-column>
          <el-table-column prop="userRank" label="用户身份" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.userRank === 1">维养单位经办人</span>
              <span v-else-if="scope.row.userRank === 2">管理局审核人 </span>
              <span v-else-if="scope.row.userRank === 3">游客</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="small"
                @click="handleDialog(scope.row)"
                :disabled="Number(userShow) !== 2"
                >修改身份</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="float:right;margin-bottom:10.003px">
        <span class="demonstration"></span>
        <el-pagination
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="560px" top="30vh" :center="true">
      <el-form :inline="true" class="demo-form-inline" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户编号">
              <el-input
                v-model="form.userCode"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名">
              <el-input v-model="form.userName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户单位">
              <el-input v-model="form.userDept" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户身份" >
              <el-select v-model="type" :value="1">
                <el-option
                style="max-width:150px"
                  v-for="item in typeOpt"
                  :key="item.index"
                  :label="item.value"
                  :value="item.index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      fileList: [],
      page: 1,
      total: 0,
      listData: [],
      isShow: false,
      query: {
        currentPage: 1,
        pageSize: 10,
        userDept: "",
        userRank: ""
      },
      userRank1: "",
      addDialogVisible: false,
      userShow: null,
      type: 1,
      id: null,
      form: {},
      typeOpt: [
        { index: 1, value: "维养单位经办人" },
        { index: 2, value: "管理局审核人" },
        { index: 3, value: "游客" }
      ]
    };
  },
  async created() {
    const res1 = await this.$http.get(`/restful/v1/dd/permit/fillLoginUser?${Math.random()}`);
    const res2 = await this.$http.get(`/restful/v1/dd/permit/getUserDetail?${Math.random()}`);
    this.fetch();
    this.userShow = res2.data.object.userRank
  },
  methods: {
    async fetch() {
      if (this.userRank1) {
        const patt = new RegExp(this.userRank1);
        if (patt.test("维养单位经办人")) {
          this.query.userRank = 1;
        } else if (patt.test("管理局审核人")) {
          this.query.userRank = 2;
        } else if (patt.test("游客")) {
          this.query.userRank = 3;
        } else {
          this.$message.info("没有查到相关信息");
          return;
        }
      }
      const res = await this.$http.post(
        `/restful/v1/dd/permit/getUserList`,
        this.query
      );
      this.query = {
        currentPage: 1,
        pageSize: 10,
        userDept: "",
        userRank: ""
      };
      this.listData = res.data.object.dataList
      this.total = res.data.object.page.totalSize
    },
    handleDialog(obj) {
      this.dialogFormVisible = true
      this.id = obj.userCode
      this.type = obj.userRank
      this.form = obj
    },
    async handleUpdate() {
      try {
        const data = await this.$http.post(
          `/restful/v1/dd/permit/updateUserRank?userCode=${this.id}&userRank=${this.type}`
        );
        if (data.data.code === 1) {
          this.fetch();
          this.dialogFormVisible = false;
          this.type = 1;
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      } catch (error) {
        this.$message.error("服务器繁忙");
      }
    },
  },
  watch: {
    addDialogVisible: function(val) {
      if (!val) {
        this.fileList = [];
      }
    }
  },
  computed: {
    newlist() {
      return this.listData.slice((this.page - 1) * 10, this.page * 10);
    }
  }
};
</script>
<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
  max-width: 150px !important;
}
.el-input {
  margin-top: 27.994px;
}
.el-input__inner {
  width: 100%;
  max-width: 150px !important;
}
</style>
